<template>
  <div class="lishibaojing">
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="风险地点">
         <el-input  size="small" v-model="formInline.riskPoint" placeholder="请输入"></el-input>
        </el-form-item>
        <!-- <el-form-item label="震源震级">
          <el-select
            size="small"
            v-model="formInline.energyGrade"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in zhenjiSelectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button size="small" type="primary" @click="onSearch"
            >查询</el-button
          >
          <el-button
            size="small"
            @click="onReset"
            style="background-color: #061f41; color: #dee1e6"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item style="float: right">
                <el-button size="small" @click="tableSetFn" type="primary"
                  >表格设置</el-button
                >
              </el-form-item>
      </el-form>
    </div>
    <div class="bottom">
      <el-table
        :data="tableData"
        :cell-style="selectedCellStyle"
        style="width: 100%;"
        :height="tableData.length > 10 ? 550 : tableHeight"
      >
        <el-table-column label="序号" type="index"> </el-table-column>
        <el-table-column
          :prop="item.field"
          :label="item.title"
          :width="item.width"
          v-for="(item, index) in tableHeaderShow"
          :key="index"
          show-overflow-tooltip
          v-if="item.title!= '操作'"
        >
        </el-table-column>
      </el-table>
    </div>
    <pagination
        :total="page.total"
        :page="page.currentPage"
        :limit="page.pageSize"
        @pagination="paginationFn"
      ></pagination>
          <!-- 表格设置 -->
    <el-dialog
      :visible.sync="tableSettingFlag"
      width="50%"
      :before-close="tableSettinghandleClose"
      custom-class="shadow-dialog"
    >
      <span slot="title" style="font-size: 16px">表格设置</span>
      <div style="height: 670px; overflow: auto; margin-bottom: 15px">
        <el-table
          height="650"
          :data="headerTitle"
          :cell-style="selectedCellStyle"
          class="draggable-table"
           row-key="field"
        >
          <el-table-column label="拖动排序" align="center">
            <template slot-scope="{ row }">
              <img
                class="rowSortable"
                src="@/assets/images/排序.png"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column
            label="列名"
            prop="title"
            align="center"
          ></el-table-column>
          <el-table-column label="是否显示" prop="show" align="center">
            <template slot-scope="{ row }">
              <el-switch
                v-model="row.show"
                active-text="是"
                inactive-text="否"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="列宽" prop="width">
            <template slot-scope="{ row }">
              <el-input
                v-model="row.width"
                size="small"
                placeholder="请输入列宽"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="tableSetSubmit">确 定</el-button>
        <el-button @click="tableSettinghandleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/huazi/pagination.vue";
import axios from "@/utils/request";
import axios3 from "@/utils/request3";
import Sortable from "sortablejs";
import { mapGetters } from "vuex";
import store from "@/store";
export default {
  components: {
    pagination,
  },
  props: {
    title: {
      type: String,
      default: "自定义标题",
    },
  },
  data() {
    return {
      tableHeight:null,
      tableSettingFlag: false,
      formInline: {
        time: [],
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      zhenjiSelectList:[
        {
          label: "微小事件",
          value: "0",
        },
        {
          label: "小事件",
          value: "1",
        },
        {
          label: "中事件",
          value: "2",
        },
        {
          label: "大事件",
          value: "3",
        },
        {
          label: "超大事件",
          value: "4",
        },
      ], //震级下拉框数据
      headerData: [], //表头数据
      headerZiduan: "t_sf_risk_account",
      headerTitle: [], //表头标题
      selectAllList: [], //下拉框数据
      // pointSelectList: [], //测点类型下拉框数据
      // shebeiSelectList: [], //设备类型下拉框数据
      // yichangSelectList: [], //异常类型下拉框数据
      tableData: [
        // {
        //   date: "2016-05-02",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1518 弄",
        // },
        // {
        //   date: "2016-05-04",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1517 弄",
        // },
        // {
        //   date: "2016-05-01",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1519 弄",
        // },
        // {
        //   date: "2016-05-03",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1516 弄",
        // },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
        //表格设置
        tableSetFn() {
      //打开
      this.tableSettingFlag = true;
      this.$nextTick(() => {
        this.rowDrop();
      });
    },
    rowDrop() {
      //行拖拽
      const tbody = document.querySelector(
        ".draggable-table .el-table__body-wrapper tbody"
      );
      new Sortable(tbody, {
        handle: ".rowSortable",
        animation: 150,
        onEnd: ({ newIndex, oldIndex }) => {
          console.log(newIndex, oldIndex);
          this.$nextTick(() => {
            const targetRow = this.headerTitle[oldIndex];
            this.headerTitle.splice(oldIndex, 1);
            this.headerTitle.splice(newIndex, 0, targetRow);
          });
          // const currRow = this.headerTitle.splice(oldIndex, 1)[0]
          // this.headerTitle.splice(newIndex, 0, currRow)
        },
      });
    },
    tableSettinghandleClose() {
      //关闭
      this.tableSettingFlag = false;
    },
    tableSetSubmit() {
      //表格设置提交
      this.headerTitle.forEach((item, index) => {
          item.sort = index;
      });
      axios
        .post("/vxeheaders/setHeaders", {
          headers: this.headerTitle,
        })
        .then((res) => {
          this.getHeaderList()
          // this.getList();
          this.$message.success("设置成功");
          this.tableSettingFlag = false;
        });
    },
    pointSelectChange(e) {
      //测点类型下拉框改变
      this.shebeiSelectList = [];
      this.selectList.safety_deviceType.forEach((item) => {
        if (e == item.code) {
          this.shebeiSelectList = item.childs; //设备类型下拉框数据
        }
      });
    },
    onSearch() {
      //查询
      this.getList("search");
    },
    onReset() {
      //重置
      this.formInline = {
        time: [],
      };
      // this.timeFn();
    },
    selectedCellStyle({ column, columnIndex, row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return {
          color: "rgba(255, 255, 255, 0.5)",
          "background-color": "#061F41",
        };
      } else {
        return {
          color: "rgba(255, 255, 255, 0.5)",
          "background-color": "#0B2C54",
        };
      }
    },
    paginationFn(e) {
      this.page.currentPage = e.page;
      this.page.pageSize = e.limit;
      if(this.formInline.riskPoint){
        this.getList("search");
      }else{
        this.getList();
      }
      setTimeout(() => {
        if (e.limit == 10) {
          this.tableHeight = 500;
        }
        if (this.tableData.length < 10) {
          this.tableHeight = null;
        }
      }, 500);
    },
    getHeaderList() {
      axios.get("/vxeheaders/getHeaders").then((res) => {
        this.headerData = res.data;
        this.getList();
      });
    },
    getList(val) {
      let obj = {};
      if (val == "search") {
        obj = {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
          riskPoint: this.formInline.riskPoint,//测点编码
        };
      } else {
        obj = {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
          // queryStartTime: this.formInline.time[0],
          // queryEndTime: this.formInline.time[1],
        };
      }
      let arr = [];
      this.headerData.forEach((item) => {
        if (item.name == this.headerZiduan) {
          this.tableData = [];
          // this.currentPage = 1;
          // this.pageSize = 10;
          // if (item.show != 0) {
            arr.push(item);
          // }
        }
      });
      this.headerTitle = arr;
      // axios.post("/doubledefense/troubleaccount/list", obj).then((res) => {
        axios3.post("/doubledefense/riskaccount/list", obj).then((res) => {
        if (res.data) {
          this.tableData = res.data.list;
          this.page.total = Number(res.data.total);
        }
      });
    },
    // timeFn() {
    //   //获取当天时间
    //   const now = new Date();
    //   const year = now.getFullYear();
    //   const month = (now.getMonth() + 1).toString().padStart(2, "0");
    //   const day = now.getDate().toString().padStart(2, "0");
    //   this.formInline.time = [
    //     String(year) + "-" + String(month) + "-" + String(day) + " 00:00:00",
    //     String(year) + "-" + String(month) + "-" + String(day) + " 23:59:59",
    //   ];
    //   // return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    // },
    // getSelectList() {
    //   axios
    //     .post("/basic/combobox/list", {
    //       condition: ["safety_pointType", "safety_deviceType", "AbnormalType"], //safety_pointType测点类型，safety_deviceType设备类型，AbnormalType异常类型，
    //     })
    //     .then((res) => {
    //       if (res.data) {
    //         this.selectList = res.data;
    //         this.pointSelectList = res.data.safety_pointType; //测点类型下拉框数据
    //         // this.shebeiSelectList = res.data.safety_deviceType;//设备类型下拉框数据
    //         this.yichangSelectList = res.data.AbnormalType; //异常类型下拉框数据
    //       }
    //     });
    // },
  },
  computed: {
    ...mapGetters(["successFlag"]),
    tableHeaderShow() {
      let arr = [];
      this.headerTitle.forEach((item) => {
        if (item.show == 1) {
          arr.push(item);
        }
      });
      return arr;
    },
  },
  watch: {
    successFlag: {
      handler(newVal, oldVal) {
        if (newVal == true) {
          setTimeout(() => {
            this.getList();
            store.dispatch("LoginSuccess", false);
          }, 1000);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // this.timeFn();
    this.getHeaderList();
    // this.getSelectList();
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-dialog__footer {
  background-color: #061f41;
}
::v-deep .el-switch__label--left {
  color: #dee1e6 !important;
}
::v-deep .el-switch__label--right {
  color: #dee1e6 !important;
}
::v-deep .is-active {
  color: #409eff !important;
  background-color: #133961 !important;
  border-radius: 4px;
}
.lishibaojing {
  .bottom {
    height: 560px;
    overflow-y: auto;
    background-color: #061f41 !important;
  }
}
::v-deep .el-form-item__label {
  color: rgba(255, 255, 255, 0.5);
}
::v-deep .el-input--small .el-input__inner {
  background-color: #061f41;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #dee1e6 !important;
}

::v-deep .el-button--small {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
::v-deep .el-table__header-wrapper {
  tr th {
    background-color: #0b2c54 !important;
    .cell {
      color: rgba(255, 255, 255, 0.5);
    }
  }
}
::v-deep .el-table__row > td {
  border: none;
}
::v-deep .el-table::before {
  height: 0px !important;
}
::v-deep .el-table__cell,
::v-deep .is-leaf {
  border: none !important;
}
::v-deep .el-table__empty-block {
  background-color: #061f41 !important;
}
::v-deep .el-table__empty-text {
  color: #dee1e6 !important;
}
::v-deep .is-leaf {
  border: none !important;
      .cell{
  color:#fff !important;
}
}
/*chrome滚动条颜色设置，纵向滚动条*/
*::-webkit-scrollbar {
  width: 5px;
  height: 10px;
  background-color: transparent;
} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
*::-webkit-scrollbar-track {
  background-color: #f0f6ff;
} /*定义滚动条轨道 内阴影+圆角*/
*::-webkit-scrollbar-thumb {
  background-color: #1890ff;
  border-radius: 6px;
} /*定义滑块 内阴影+圆角*/
.scrollbarHide::-webkit-scrollbar {
  display: none;
}
.scrollbarShow::-webkit-scrollbar {
  display: block;
}
::v-deep .el-table__body-wrapper{
  background-color: #061f41 !important;
}
::v-deep .el-table--medium{
  background-color: #061f41 !important;
}
</style>
<style lang="scss">
// .el-table__body-wrapper::-webkit-scrollbar-thumb {
//   border-radius: 3px;
//   background: #1890ff; /* 修改滚动条颜色 */
// }
.el-select-dropdown__list {
  padding: 0 !important;
}
.shadow-dialog{
  box-shadow: 0px 0px 8.45px 4.23px rgba(62, 137, 222, 0.6);
}
</style>

